//爱宠成员弹窗
import React from 'react'
import { Modal } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheQueryForm from '@/components/TheQueryForm';
import { getDateTime3 } from '@/utils/getDate'
import _ from 'lodash'
import { apiSharerLovePetPageB } from '@/request/distribution/sharerManagement.js';
import moment from 'moment';
export default class PetLoverModal extends React.Component {
  constructor(props) {
    super(props)
    this.queryFormRefpet = React.createRef()
    this.state = {
      isModal: false, //弹窗是否打开
      sharedById: null,//详情id
      columns: [
        {
          title: "用户昵称",
          dataIndex: "nickName",
          key: "nickName",
        },
        {
          title: "用户ID",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户会员手机号",
          dataIndex: "memberMobile",
          key: "memberMobile",
        },
        {
          title: "加入时间",
          dataIndex: "joinTime",
          key: "joinTime",
        },
        {
          title: "加入渠道",
          dataIndex: "joinWay",
          key: "joinWay",
          render: (text) => {
            let label = ""
            switch (parseInt(text)) {
              case 0:
                label = "商品分享注册"
                break;
              case 1:
                label = "拉新活动注册"
                break;
              case 2:
                label = "主动绑定"
                break;
              default:
                break;
            }
            return label
          }
        }
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      searchOption: [{ field: 'time', label: '时间', required: false, rules: [], type: 'RangePicker' }],
      queryForm: {}
    }
  }
  openModal = (id, queryForm) => {
    if (queryForm.hasOwnProperty('startTime') && queryForm.hasOwnProperty('endTime')) {
      this.setState({
        queryForm: { startTime: queryForm.startTime, endTime: queryForm.endTime },
      })
    } else {
      this.setState({
        queryForm: {},
      })
    }
    this.setState({ isModal: true, sharedById: id }, () => {
      this.getData()
    })
  }
  getData = async () => {
    const { sharedById, queryForm, pageData } = this.state
    await apiSharerLovePetPageB({ sharedById, ...queryForm, param: { ...pageData } }).then(res => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount
        })
      }
    })
    setTimeout(() => {
      this.queryFormRefpet.formRef.setFieldsValue({ time:queryForm.startTime ? [moment(queryForm.startTime), moment(queryForm.endTime)] : [] })
    }, 100)
  }
  //分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  }
  // 搜索重置
  onReset = () => {
    this.setState({ queryForm: {}, },
      () => { this.getData() });
  }
  // 搜索
  onFormSearch = (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.startTime = getDateTime3(values.time[0]) + ' 00:00:00'
      values.endTime = getDateTime3(values.time[1]) + ' 23:59:59'
      delete (values.time)
    }
    this.setState({ pageData: { pageNo: 1, pageSize: 10 }, queryForm: values },
      () => { this.getData() }
    )
  }
  render() {
    const { isModal, columns, pageData: { pageNo, pageSize }, total, dataSource, searchOption } = this.state
    return (
      <Modal title="下级爱宠成员" width={'70%'} visible={isModal} footer={null} destroyOnClose onCancel={() => { this.setState({ isModal: false, queryForm: {} }) }} >
        <TheQueryForm ref={(ref) => this.queryFormRefpet = ref} show option={searchOption} onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)}  ></TheQueryForm>
        <TheTable scroll={{ x: "max-content", y: '200px' }}
          columns={columns}
          dataSource={dataSource} />
        <ThePagination
          pageNo={pageNo}
          pageSize={pageSize}
          total={total}
          pageChange={this.pageChange}
        />
      </Modal >
    )
  }
}
